<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>市场部</title>
    <link href="https://cdn.bootcss.com/element-ui/2.2.2/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<!--显示已经预约的客户所占学院人数比例-->
<div id="echarts-1" style="width: 1000px;height:700px;"></div>
<el-row>
    <el-col :span="12"><div id="echarts-2" style="width: 600px;height: 400px;"></div></el-col>
    <el-col :span="12"><div id="echarts-3" style="width: 600px;height: 400px;"></div></el-col>
</el-row>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.2.2/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>
<script>

    var myChart1 = echarts.init(document.getElementById('echarts-1'));
    $.get('/marketManager/collegeRatio').done(function (data) {
        var option = {
            title: {
                text: '已经预约的客户所占学院人数比例',
                textStyle: {
                    align: 'right',
                    fontSize: '15'
                },
                left: '40%'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"},
            series: [
                {
                    name: '预约情况',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],
                    label: {
                        normal: {
                            position: 'inner'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value:111,name:'数软学院'},
                        {value:998,name:'文学院'},
                        {value:223,name:'计科学院'}
                    ]
                },
                {
                    name:'1',
                    type:'pie',
                    radius: ['40%', '55%'],
                    data:[
                        {value:11, name:'已拍人数'},
                        {value:100, name:'未拍人数'},
                        {value:990, name:'已拍人数'},
                        {value:8, name:'未拍人数'},
                        {value:40, name:'已拍人数'},
                        {value:183, name:'未拍人数'},
                    ]
                }]
        };
        myChart1.setOption(option);
    })

    var myChart2 = echarts.init(document.getElementById('echarts-2'));
    $.get('/marketManager/collegeRatio').done(function (data) {
        var option2 = {
            title: {
                text: '每周预约趋势折线图'
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };
        myChart2.setOption(option2);
    })

    var myChart3 = echarts.init(document.getElementById('echarts-3'));
    $.get('/marketManager/collegeRatio').done(function (data) {
        var option3 = {
            title:{
                text: '一月内预约时间分布柱状图'
            },
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['8:00-10:00', '10:00-12:00', '14:00-16:00', '16:00-18:00'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'预约时间',
                    type:'bar',
                    barWidth: '60%',
                    data:[10, 52, 200, 334]
                }
            ]
        }
        myChart3.setOption(option3);
    })

</script>
</html>